<template>
  <view class="bar fixed top left" style="width:100%;" :class="[props.bgColor]">
    <view :style="style">
      <view class="flex flex-sub bar">
        <view class="flex basis-sm align-center justify-start margin-left-df" :style="'color:'+storeColor.custom.leftColor">
          <text v-if="props.isBack" @tap="BackPage">
            <text  class="icon-xianxingzuojiantou"></text>返回
          </text>
          <slot v-else name="left"></slot>
        </view>
        <view class="flex align-center justify-center basis-xl">
          <slot name="content"></slot>
        </view>
        <view class="flex align-center justify-end basis-sm margin-right-df" :style="'color:'+storeColor.custom.rightColor">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
/**自定义插槽
 * @slot  left,content,right
 * 传入参数
 * @bgCoor  string 背景颜色class
 * @isBack Boolean
 */
import { themeStore } from '@/store/pinia/modules/theme'
import { computed, getCurrentInstance } from 'vue'

interface Props {
  // bgColor优先级最高，如要使用主题就不要使用此属性
  bgColor?: object|string;
  isBack?: boolean|string;
}

const props = withDefaults(defineProps<Props>(), {
  bgColor: '',
  isBack: false,
});

const useTheme = themeStore();
const {storeColor} = useTheme;

// const { proxy } = getCurrentInstance();
// const { $StatusBar, $CustomBar } = proxy;

const style = computed(() => {
  // let StatusBar= $StatusBar*2+'rpx;';
  // let CustomBar= 44+'px;';
  let bgImage = storeColor.custom.backgroundImage;
  let style = `color:${storeColor.custom.color};`;
  if (!props.bgColor) style = `${style}background:${storeColor.custom.background};`
  if (bgImage) {
    style = `${style}background-image:url(${bgImage});`;
  }
  return style
})

const BackPage = () => {
  uni.navigateBack({
    delta: 1
  });
}
</script>

<style>
.bar {
  height: var(--status-bar-height);
  min-height: 44px;
}
</style>
